<template>
    <div class="moa-search-div">
      <div class="moa-search-bar">
        <div class="moa-search-box">
          <!-- <i class="weui-icon-search"></i> -->
          <img src="@/assets/img/search.png" class="img"/>
          <input  autocomplete="off" type="search"  class="moa-search__input" :placeholder="placeholder" v-model="value" @keyup.enter="search" @focus="focus" @focusout="focusout">
          <a href="javascript:" class="weui-icon-clear" @click="clear" v-if="value"></a>
        </div>
      </div>
        <!-- <a href="javascript:" class="moa-search-button" @click="search">搜索
        </a> -->
    </div>
</template>

<script>
    export default {
        name: "moaSearch",
      props:{
        placeholder:{
          type:String,
          default:'请输入'
        }
      },
      data(){
          return{
            value:"",
            timer:null
          }
      },
      mounted(){
        setTimeout(()=>{
          this.value = "";
        },500) 
      },
      methods:{
        clear(){
          this.value=""
          this.$emit('onClear')
        },
        search(){
          this.$emit('onSearch',this.value)
        },
        focus(){
          clearTimeout(this.timer)
        },
        focusout(){
          this.timer = setTimeout(() => {
            window.scrollTo(0,0)
            // 间隔设为10，减少页面失去焦点定时器的突兀感，
          },10)
        }
      },
      watch:{
        value(){
          this.search()
        }
      },
      destroyed() {
    clearTimeout(this.timer)
  }
    }
</script>

<style scoped>
.img{
  width: 20px;
  height: 20px;
}
input::placeholder{
  font-size:15px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(204,204,204,1);
  line-height:32px;
}
.moa-search-div{
  width: 100%;
  position: relative;
  padding: 8px 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  background-color: #ffffff;
  z-index:100;
  border-radius: 4px;
}
.moa-search-div:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: none;
  color: #D7D6DC;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.moa-search-div:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #D7D6DC;
  color: #D7D6DC;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.moa-search-bar{
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
  flex: auto;
  background-color: #EFEFF4;
  height: 35px;
  border-radius: 4px;
}
.moa-search-bar:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  border-radius: 10px;
  border: 1px solid #E6E6EA;
  box-sizing: border-box;
  background: #FFFFFF !important;
}
  .moa-search-box{
    position: relative;
    padding-left: 15px;
    padding-right: 30px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
    display: flex;
    align-items: center;
  }
  .moa-search__input{
    padding: 4px 4px;
    width: 100%;
    height: 1.42857143em;
    border: 0;
    /* font-size: 14px; */
    line-height: 1.42857143em;
    box-sizing: content-box;
    background: transparent;
    /*input和placeholder需要同时设置fontSize,并且input的font-size比placeholder大  解决ios中placeholder显示不完整 */
    font-size:20px;
    /* font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(204,204,204,1); */
  }
  .moa-search__input:focus {
    outline: none;
  }
  .moa-search-box .weui-icon-search{
    position: absolute;
    left: 10px;
    top: 0;
    line-height: 35px;
  }
  .moa-search-button{
    display: block;
    margin-left: 10px;
    line-height: 28px;
    color: #3c81f6;
    white-space: nowrap;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    font-size: .6rem
  }
.moa-search-box .weui-icon-clear{
  position: absolute;
  right: 0px;
  top: 0;
  padding: 0 10px;
  line-height: 28px;
}
.moa-search-box input::-webkit-search-cancel-button{
  display: none;
}
.moa-search-box input[type=search]::-ms-clear{
  display: none;
}
</style>
